<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录

		  <div v-if="this.code != 0" style="color: red;">"账号或密码错误"</div>
	  </h3>
	  
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
	  >
	  <!-- :before-close="handleClose" -->
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
export  default {
  name:"Login",
  data(){
    return {
		code: 0,
		form:{
			username: '',
			password: ''
		},
      //表单验证，需要再el-form-item 元素中增加prop属性
		rules:{
			username: [
				{required:true,message:'账号不能为空',trigger:'blur'}
			],
			password:[
				{required: true,message: '密码不能为空',trigger:'blur'}
			]
		},
    //对话框显示和隐藏
    dialogVisible:false
  }
  },
  methods:{
    onSubmit(formName) {
      //为表单绑定验证功能
      this.$refs[formName].validate((valid) =>{
        if (valid){
          //使用 vue-router路由到指定页面，该方式称之为编程式导航
        //   this.$router.push("/main/"+this.form.username);
			var formData = {
				username: this.form.username,
				password: this.form.password,
			};
			this.axios.post(`http://120.77.213.195:8001/login`,this.form).then((response) => {
				// console.log("响应：")
				// console.log(response);
				this.code = response.data.code;
				if(response.data.code==0){
					sessionStorage.setItem("token",response.data.data.token);
					sessionStorage.setItem("loginUser",response.data.data.username);
					this.$root.loginName = response.data.data.username;
					// console.log(this.$root.loginName);
					// this.$router.push("/main/blog");
					// this.$router.go(0);
					// alert("登录成功");
					this.$router.push({ name: 'blog', params: { id: 5 } });
				}else if(response.data.code==-1){
					alert("登录失败");
				}
			});
				// $.ajax({  
				// 	type: "POST",  
				// 	contentType:"application/json;charset=utf-8",
				// 	url:'http://120.77.213.195:8001/login',  
				// 	// data:JSON.stringify($('#form').serialize()),  
				// 	data:JSON.stringify(formData), 
				// 	dataType: "json",
				// 	// async: false,  
				// 	error: function(request) {  
				// 		alert("Connection error");  
				// 	},  
				// 	success: function(res) {  
				// 		//接收后台返回的结果  
				// 		console.log(res);
				// 		console.log("=======");
				// 		if(res.code==0){
				// 			console.log("成功登录");
				// 			// let authString = JSON.stringify(res.data.token);
				// 			sessionStorage.setItem("token",res.data.token);
				// 			// console.log(global.USERNAME);
				// 			// this.COMMON.userName = res.data.username;
							
				// 			userid = res.data.username;
				// 			window.location.href = "http://localhost:8080/#/main/blog";
				// 		}
				// 		// window.location.href = "http://localhost:8080/#/main/blog";
				// 	} 
				// });
				// this.$root.loginName = userid;
				// console.log(this.$root.loginName);
			// this.$router.push("/main/blog");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box{
  border: 1px solid #DCDFE6;
  width: 350px;
  margin:100px auto;
  padding:35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow:0 0 25px #909399;
}

.login-title{
  text-align:center;
  margin:0 auto 40px auto;
  color:#303133;
}
</style>
